<template>
  <div class="go-project-template-market">
    <div class="content-box">
      <div class="document-menu">
        <h2>
          界面文档
        </h2>
        <h2>
          逻辑文档
        </h2>
      </div>
      <div class="document-body">
        <h1>#事件</h1>
        <n-gradient-text type="success">
          发送事件：globalThis.$Emitter.emit('key',options)<br>
          监听事件：globalThis.$Emitter.on('key',options)<br>

          key: 自已定，发送和接收一致即可<br>
          options：发送和接收的参数<br>
        </n-gradient-text>
        <h2>UI窗口事件</h2>
        <h3>
          用户登录：
          <n-gradient-text type="success">
            globalThis.$Emitter.emit('USER_LOGIN',{name:'USER_LOGIN',label:'用户登录',dialogWidth:'350px'})
          </n-gradient-text>
        </h3>
        <h3>数据管理：
          <n-gradient-text type="success">
            globalThis.$Emitter.emit('DATA_MANAGE',{name:'DATA_MANAGE',label:'数据管理'})
          </n-gradient-text>
        </h3>
        <h3>事件管理：
          <n-gradient-text type="success">
            globalThis.$Emitter.emit('EVENT_MANAGE',{name:'EVENT_MANAGE',label:'事件管理'})
          </n-gradient-text>
        </h3>
        <h3>全局变量：
          <n-gradient-text type="success">
            globalThis.$Emitter.emit('GLOBAL_PARAM',{name:'GLOBAL_PARAM',label:'全局变量'})
          </n-gradient-text>
        </h3>
        <h3>通讯管理：
          <n-gradient-text type="success">
            globalThis.$Emitter.emit('DEVICE_MANAGE',{name:'DEVICE_MANAGE',label:'通讯管理'})
          </n-gradient-text>
        </h3>
        <n-gradient-text type="warning">
          注：通过globalThis.$Emitter.emit可以发送事件，系统会自动监听，并打开窗口。
        </n-gradient-text>
        <n-gradient-text type="error">
          只有 label 属性可以自定义修改，其他参数不行
        </n-gradient-text>
        <h3>标签选择器事件（监听）：
        </h3>
        <h3>
          切换事件：
          <n-gradient-text type="success">
            globalThis.$Emitter.on('Change_VInputsTab',(res)=>{})
          </n-gradient-text>
        </h3>
        <h3>
          点击事件：
          <n-gradient-text type="success">
            globalThis.$Emitter.on('Click_VInputsTab',(res)=>{})
          </n-gradient-text>
        </h3>
        <h3>刷新表格数据</h3>
        <n-gradient-text type="success">
          globalThis.$Emitter.emit('UI_REFRESH_TABLE_DATA',{table:'business_formula'})
        </n-gradient-text>
        <n-gradient-text type="warning">
          table: 数据库表名称
        </n-gradient-text>
        <!--        ===============================-->
        <h2>内置触发事件</h2>
        <h3>
          单次执行流程：
          <n-gradient-text type="success">
            globalThis.$Emitter.emit('ONCE_RUN', {id:1})
          </n-gradient-text>
        </h3>
        <n-gradient-text type="warning">
          id: 流程id
        </n-gradient-text>
        <h3>
          停止流程：
          <n-gradient-text type="success">
            globalThis.$Emitter.emit('STOP_PROCESSOR', {id:1})
          </n-gradient-text>
        </h3>
        <n-gradient-text type="warning">
          id: 流程id
        </n-gradient-text>
        <!--        ===============================-->
        <h1 @click="fsdfasdfsadf">#内置函数</h1>
        <h2>打开窗口</h2>
        <h3>
          监听输入：
          <n-gradient-text type="success">
            commonUtils.addEventListenerKeydown((keys)=>{},1000)
          </n-gradient-text>
        </h3>
        <n-gradient-text type="warning">
          注：键盘按下事件，在 { } 内写自己的逻辑，keys是键盘输入后返回的数据（在时间内返回所有按下的数据），
          1000=返回数据的时间，单位/ms, 时间可自行调整，
          回调成功之后会自动注销事件
        </n-gradient-text>
        <h1>#路由</h1>
        <h2>页面跳转</h2>
        <h3>编辑流程：
          <n-gradient-text type="success">
            location.href='/#/flow'
          </n-gradient-text>
        </h3>
        <h1>#API</h1>
        <h2>全局变量</h2>
<!--        <h3>-->
<!--          新增：-->
<!--          <n-gradient-text type="success">-->
<!--            globalThis.$GlobalParamApi.AddGlobalParam({ Name: '', Value: '' },(res)=>{})-->
<!--          </n-gradient-text>-->
<!--        </h3>-->
<!--        <n-gradient-text type="warning">-->
<!--          param：{ Name: string, Value: string }<br>-->
<!--          (res)=>{}： (res)=>{ }-->
<!--        </n-gradient-text>-->
        <h3>
          修改：
          <n-gradient-text type="success">
            globalThis.$GlobalParamApi.UpdateGlobalParam({ Name: '', Value: '' },(res)=>{})
          </n-gradient-text>
        </h3>
        <n-gradient-text type="warning">
          param：{ Name: string, Value: string }<br>
          (res)=>{}：(res)=>{ }
        </n-gradient-text>
        <h3>
          获取：
          <n-gradient-text type="success">
            globalThis.$GlobalParamApi.GetGlobalParam(paramNames,()=>{})
          </n-gradient-text>
        </h3>
        <n-gradient-text type="warning">
          paramNames：string[]; 全局变量名称<br>
          (res)=>{}： (res)=>{ }
        </n-gradient-text>

        <h1>#内置组件事件</h1>
        <h2>标签选择器</h2>
        <h3>
          change切换事件：
          <n-gradient-text type="success">
            globalThis.$Emitter.on('UI_Change_VInputsTab', (res)=>{})
          </n-gradient-text>
        </h3>
        <n-gradient-text type="warning">
          param：{ Name: string, Value: string }<br>
          (res)=>{}： (res)=>{ }
        </n-gradient-text>
        <h3>
         click点击事件：
          <n-gradient-text type="success">
            globalThis.$Emitter.on('UI_Click_VInputsTab', (res)=>{})
          </n-gradient-text>
        </h3>
        <n-gradient-text type="warning">
          param：{ Name: string, Value: string }<br>
          (res)=>{}：(res)=>{ }
        </n-gradient-text>
      </div>

      <!--      <n-space vertical>-->
      <!--        <n-button text type="primary">-->
      <!--          文档编辑中... 👆-->
      <!--        </n-button>-->
      <!--      </n-space>-->
    </div>
  </div>
</template>

<script setup lang="ts">
//@ts-ignore
import {Emitter} from "@/utils/Emitter";
import { AppParams } from '@/utils/appParams'
//@ts-ignore
import SystemApi from '@/api/flow/SystemApi.js'
const fsdfasdfsadf = () => {
  new SystemApi().OpenForm('chart/preview/39')
}
</script>

<style lang="scss" scoped>
@include go('project-template-market') {
  box-sizing: border-box;
  height: calc(100vh - 62px);
  padding-top: 3vh;
  .content-box {
    min-width: 900px;
    width: calc(100vw - 800px);
    height: calc(100vh - 160px);
    overflow-y: auto;
    margin: 0 auto 0;
    padding: 20px;
    border-radius: 10px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.15) 0%, rgba(29, 83, 163, 0.3) 99.09%);
    box-shadow: 0px 0px 6px 6px rgba(0, 0, 0, 0.04);
    //@extend .go-flex-center;

    display: flex;

    .document-menu {
      width: 150px;
    }

    .document-body {
      padding-bottom: 20px;

      h1:not(:first-child) {
        margin-top: 30px;
      }

      h3 {
        display: flex;
      }

      span {
        white-space: break-spaces;
      }
    }

    img {
      border-radius: 6px;
    }

  }
}

@include dark() {
  @include go('project-template-market') {
    background-color: #18181c;
  }
}
</style>
